<template>
    <h1>账号信息</h1>
    <div class="waper">
        <p class="username">用户名：</p>
        <el-input-tag :value = "user.username" size = "large" placeholder="Please input" />
        <p class="username">账号登录时间：</p>
        <el-input-tag :value = "loginTime" size = "large" placeholder="Please input" />
    </div>

   <h1>账号管理</h1>

   <el-row class="row">
        <el-row class="row1">
            <el-icon color="#67c23a"><Promotion /></el-icon>
        </el-row>
        <span>帮助中心</span>
        <el-button type="success">帮助中心</el-button>
    </el-row>

    <el-row class="row">
        <el-row class="row1">
            <el-icon color="#0185cf"><Lock /></el-icon>
        </el-row>
        <span>登录密码修改</span>
        <el-button type="primary" @click="openDialog">修改密码</el-button>
    </el-row>

    <el-row class="row">
        <el-row class="row1">
            <el-icon><SwitchButton /></el-icon>
        </el-row>
        <span>账号退出登录</span>
        <el-popconfirm 
        title="确认退出登录吗？"
        cancel-button-type="info"
        confirm-button-type="primary"
        @cancel="onCancel"
        @confirm="onConfirm"
        >
            <template #reference>
            <el-button type="info">退出登录</el-button>
            </template>
        </el-popconfirm>
    </el-row>

    <el-row class="row">
        <el-row class="row1">
            <el-icon color="#f56c6c"><Warning /></el-icon>
        </el-row>
        <span>账号注销</span>
        <el-popconfirm 
        title="确认注销账号吗？"
        cancel-button-type="info"
        confirm-button-type="danger"
        @cancel="onCancel"
        @confirm="onConfirmDanger"
        >
            <template #reference>
            <el-button type="danger">注销账号</el-button>
            </template>
        </el-popconfirm>
    </el-row>
    <PasswordDialog
    v-show="showDialog"
    @cancel="showDialog = false"
    ></PasswordDialog>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { type IUser } from '../views/pages/Register.vue'
import PasswordDialog from './PasswordDialog.vue'

const router = useRouter()     // 路由实例创建
const user = ref(JSON.parse(localStorage.getItem('user') as string))
const loginTime = ref(localStorage.getItem('time'))


// 修改密码
const showDialog = ref(false)
const openDialog = () => {
    showDialog.value = true
}


const onCancel = () => {             // 取消操作

}

const onConfirm = () => {           // 确认退出登录
    localStorage.removeItem('user')
    localStorage.removeItem('time')
    router.push('/login')
}


const onConfirmDanger = () => {           // 确认注销账号
    
    const users = ref(JSON.parse(localStorage.getItem('users') as string))
    users.value = users.value.filter((item: IUser) => item.username !== user.value.username)
    localStorage.setItem('users', JSON.stringify(users.value))
    localStorage.removeItem('user')
    localStorage.removeItem('time')
    router.push('/login')
}


</script>

<style scoped lang="scss">
h1 {
    margin-bottom: 20px;
}
.waper {
    margin-bottom: 20px;
}
.username {
    margin-bottom: 8px;
    margin-top: 5px;
}
.el-icon {
    font-size: 20px;
    padding: 10px;
}
.row{
    width: 100%;
    height: 50px;
    background-color: #fff;
    position: relative;
    border-radius: 5px;
    margin-bottom: 20px;
}
.row1{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #f3f9ff;
    margin: 5px;
}
span {
    padding: 12.5px;
}
.el-button {
   margin: 10px;
   position: absolute;
   right: 10px;
}
</style>